<template>
    <div class="classification">
        <div class="leftPage" ref="leftPage">
            <div>
                <div v-for="(item, index) in classpage.class" :key="index" class="item" :class="item.maitKey==classpage.maitKey?'checked':''" @click="maitKeyChange(item.maitKey,item.miniWallkey)">
                    <p>{{item.title}}</p>
                </div>
            </div>
        </div>
        <div class="rightPage" ref="rightPage">
            <div>
                <main-types :mainTypes="classpage.mainTypes" :size="'33.33%'"></main-types>
                <div class="titlepage">
                    <div v-for="(v, index) in classpage.sortFilter" :key="'sort'+index" :class="v.sortKey==classpage.sortKey?'sortKey':''" @click="sortKeyClick(v.sortKey)">{{v.title}}</div>
                </div>
                <guessLike :guessLike="classpage.miniWall"></guessLike>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll';
import mainTypes from '../components/mainTypes';
import guessLike from '../components/GuessLike';

import {mapState,mapMutations,mapActions} from 'vuex';
import { setTimeout } from 'timers';

export default {
    components:{
        mainTypes,
        guessLike,
    },
    data(){
        return {

        }
    },
    computed:{
        ...mapState(["classpage"]),
    },
    methods:{
        initScroll(){
            setTimeout(()=>{
                new BScroll(this.$refs.leftPage,{click:true});
                new BScroll(this.$refs.rightPage,{click:true});                
            },100)
        },
        maitKeyChange(e,m){
            this.$store.commit("setMaitKey",e);
            this.$store.commit("setMiniWallkey",m);
            this.$store.commit("setSortKey","pop");
            this.ClassCommodity(this.classpage.maitKey);
            this.ClassMiniWall(this.classpage.miniWallkey);
        },
        sortKeyClick(str){
            this.$store.commit("setSortKey",str);
            this.ClassMiniWall(this.classpage.miniWallkey);
        },
        ...mapActions(["ClassPageLoad","ClassCommodity","ClassMiniWall"]),
    },
    beforeMount(){
        this.ClassPageLoad();  
    },
    mounted(){
        this.initScroll();
    }
}
</script>

<style lang="less" scoped>
    .classification{
        position: absolute;        
        width: 100%;
        top: @h;
        bottom: @h;
        .leftPage{
            width: 25%;
            height: 100%;
            background: @ef;
            float: left;
            .checked{
                background: @white;
            }
            .checked>p{
                border-left: 9PX solid @pink !important;
            }
            .item{
                width:100%;
                height: 85px;
                padding: 22px 0px;
                box-sizing: border-box;     
                p{
                    width: 100%;
                    line-height: 41px;
                    font-size: 30px;
                    text-align: center;
                    box-sizing: border-box;
                    border-left: 9PX solid @ef;
                }
            }
        }
        .rightPage{
            float: right;
            width: 75%;
            height: 100%;
            .titlepage{
                display: flex;
                padding:23px 0px;
                border-top: 1px solid @cc;
                border-bottom: 1px solid @cc;
                margin:15px 0px;
                div{
                    flex-grow:1;
                    text-align: center;
                    border-right: 1PX solid @cc;
                    box-sizing: border-box;
                    font-size: 30px;
                }
                .active{
                    color: @light-pink;
                }
                div:last-child{
                    border-right: 0px;

                }
            }
        }
        .sortKey{
            color: @pink;
        }
    }
</style>
